<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <!-- 不需要编译就执行的指令，通常用于加载静态资源 -->
        <div v-pre>{{msg}}</div>
        <!-- 只绑定一次 -->
        <div v-once>{{msg}}</div>
  
        
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
       const app = Vue.createApp({
            //模板
            //如果有template属性，那么直接渲染，不再找body中的元素
            //如果没有template，才继续找元素，并且将其转成template
/*             template:`
            <span>{{msg1}}</span>
            
            `, */
            //状态管理
            data : function () {
                return {
                    msg : "hello world!",
                    msg1 : "hello Vue!"
                }
            }
       });
    //    将app实例挂载到div中
       app.mount('#div');
    </script>

</body>
</html>